<template>
    <div>
      <el-card class="box-card">
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-input
              v-model="userName"
              placeholder="请输入Iwork用户名称"
              style="width: 200px"
              clearable
            ></el-input>
  
            Iwork响应时间:
            <el-date-picker
              v-model="timeVal"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            >
            </el-date-picker>
            <el-select
              v-model="numValue"
              placeholder="选取当前批次"
              @change="changeTitleCon(numValue)"
              clearable
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in numList"
                :key="item.id"
              ></el-option>
            </el-select>
            <!-- <el-date-picker v-model="timeVal"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
            </el-date-picker> -->
            <el-button @click="searchData()" type="primary">查询</el-button>
            <el-button type="success" @click="exportGet()">导出</el-button>
          </div>
          <div>
            <el-button @click="$router.go(-1)" type="primary">返回</el-button>
            <el-button @click="handleRefresh()" type="success">刷新</el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px">
        <div class="des_con">
          <table class="table">
            <tr>
              <td><span>推送活动类型：</span>{{ duInfo.activityName }}</td>
              <td>
                <span>推送方式：</span
                >{{ duInfo.sendType == 0 ? "普通推送" : "推送升级" }}
              </td>
            </tr>
            <tr>
              <td><span>推送内容：</span>{{ duInfo.originalContent }}</td>
              <td><span>推送对象：</span>{{ getSendObject(duInfo) }}</td>
            </tr>
            <tr>
              <td v-if="duInfo.unitType"><span>推送层级：</span >{{ getState(duInfo.unitType)}}</td>
              <td><span>已发短信：</span>{{ duInfo.shortCount }}</td>
            </tr>
            <tr>
              <td><span>外呼成功数：</span>{{ duInfo.aiCountSuccess }}</td>
              <td><span>Iwork推送人数：</span>{{ totalCount }}</td>
            </tr>
            <tr>
              <td>
                <span>已读：</span
                ><span class="read" @click="fetchTableListWithFirstPage(1)">{{
                  isRedEq1Count
                }}</span>
              </td>
              <td>
                <span>未读：</span
                ><span class="read" @click="fetchTableListWithFirstPage(0)">{{
                  totalCount > isRedEq1Count ? totalCount - isRedEq1Count : "0"
                }}</span>
              </td>
            </tr>
  
            <tr>
              <td>
                <span>失败数量：</span
                ><span class="read" @click="fetchTableListIsSend(0)">{{
                  isSendEq0Count
                }}</span>
              </td>
            </tr>
          </table>
  
          <!-- <p><span>推送内容：</span>{{$route.query.activityName}}</p>
            <p><span>推送方式：</span>{{$route.query.sendType == 0 ? "普通推送" : '推送升级'}}</p> -->
          <!-- <p><span>推送模式：</span>{{$route.query.sendGroup == 0 ? "个人" : '群组'}}</p>
            <p><span>推送内容：</span>{{$route.query.content}}</p> -->
          <!-- <p><span>日期：</span>{{$route.query.sendTime}}</p>
            <p><span>已发短信：</span>{{$route.query.shortCount}}</p>
            <p><span>外呼成功数：</span>{{$route.query.aiCountSuccess}}</p>
            <p><span>Iwork推送人数：</span>{{$route.query.allRead}}</p>
            <p><span>已读：</span><span class="read" @click="fetchTableList(1)">{{isRead}}</span></p>
            <p><span>未读：</span><span class="read" @click="fetchTableList(0)">{{noRead}}</span></p> -->
        </div>
        <el-table :data="dataList" style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span :title="scope.row.id"> {{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="Iwork用户名称"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <span
                @click="goDetail(scope.row.jobNo, scope.row.linkId)"
                style="cursor: pointer; color: rgb(62, 142, 247)"
              >
                {{ scope.row.userName }}({{ scope.row.jobNo }})</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="地市"
            align="center"
            prop="cityName"
          >
          </el-table-column>
          <el-table-column
            label="单位名称"
            width="160"
            align="center"
            prop="orgFullName"
          >
          </el-table-column>
          <el-table-column label="IWork推送情况" width="160" align="center">
            <template slot-scope="scope">
              <span v-html="getIWorkState(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="短信推送情况" width="160" align="center">
            <template slot-scope="scope">
              <span v-html="getSmsState(scope.row)"></span>
            </template>
          </el-table-column>
  
          <el-table-column label="外呼推送情况" width="160" align="center">
            <template slot-scope="scope">
              <!-- <span v-html="getCallState(scope.row)"></span> -->
  
              <el-tag
                :type="
                  scope.row.aiRed == 0 || scope.row.aiRed == 2
                    ? 'danger'
                    : 'success'
                "
                disable-transitions
                v-if="null != scope.row.aiIsSend"
                v-html="getCallState(scope.row)"
              ></el-tag>
            </template>
          </el-table-column>
  
          <el-table-column label="IWork响应情况" width="160" align="center">
            <template slot-scope="scope">
              <span v-html="getIWorkReadState(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="外呼响应情况" width="180" align="center">
            <template slot-scope="scope">
              <span v-html="getCallReadState(scope.row)"></span>
            </template>
          </el-table-column>
  
          <!-- <el-table-column label="IWork推送日志" width="180" align="center">
            <template slot-scope="scope">
              <span v-html="getIWorkmessage(scope.row)"></span>
            </template>
          </el-table-column> -->
          <el-table-column prop="message" label="IWork推送日志" align="center">
          </el-table-column>
          <el-table-column
            prop="shortMessage"
            label="短信推送日志"
            align="center"
          >
          </el-table-column>
  
          <el-table-column prop="aiMessage" label="外呼推送日志" align="center">
          </el-table-column>
          <el-table-column prop="logIndex" label="批次" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                @click="handleDetail(scope.row.jobNo, scope.row.logIndex)"
                >详情</el-button
              >
  
              <!-- <el-button size="mini"
                         type="success"
                         @click="waihu(scope.row.id)">外呼测试</el-button> -->
            </template>
          </el-table-column>
  
          <!-- <el-table-column prop="content"
                           label="活动名称"
                           align="center">
          </el-table-column> -->
          <!-- <el-table-column prop="sendTime"
                           label="推送日期"
                           align="center">
          </el-table-column> -->
          <!-- <el-table-column label="是否已反馈" align="center">
            <template slot-scope="scope">
              <span class="green" v-if="scope.row.isRed === 1"></span>
              <span class="red" v-if="scope.row.isRed === 0">未反馈</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column prop="iworkTime"
                           label="反馈时间"
                           align="center">
          </el-table-column> -->
          <!-- <el-table-column label="短信是否推送"
                           align="center">
            <template slot-scope="scope">
              <i class="el-icon-circle-check green"
                 v-if="scope.row.shortRed === 1"></i>
              <i class="el-icon-circle-close red"
                 v-if="scope.row.shortRed === 0"></i>
            </template>
          </el-table-column>
          <el-table-column prop="shortTime"
                           label="短信推送时间"
                           align="center">
          </el-table-column>
          <el-table-column label="是否已呼通"
                           align="center">
            <template slot-scope="scope">
              <i class="el-icon-circle-check green"
                 v-if="scope.row.aiRed === 1"></i>
              <i class="el-icon-circle-close red"
                 v-if="scope.row.aiRed === 0"></i>
            </template>
          </el-table-column>
          <el-table-column label="外呼时间" prop="shortTime" align="center">
          </el-table-column> -->
          <!-- <el-table-column label="是否已通知上级领导"
                           align="center">
            <template slot-scope="scope">
              <i class="el-icon-circle-check green"
                 v-if="scope.row.aiRed === 1"></i>
              <i class="el-icon-circle-close red"
                 v-if="scope.row.aiRed === 0"></i>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="发送日志"
                           prop="messageLog"
                           align="center">
          </el-table-column> -->
          <!-- <el-table-column label="操作"
                           align="center"
                           width="320">
            <template slot-scope="scope">
  
              <el-button size="mini"
                         type="success"
                         @click="waihu(scope.row.id)">外呼测试</el-button>
  
               <el-button size="mini" type="warning" @click="handleOpenPush(scope.row.id)">开启</el-button> 
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :currentPage="pageNum"
          :pageSize="pageSize"
          ref="pagination"
          @pageChange="pageChange"
        />
      </el-card>
      <!-- 弹窗, 新增 / 修改 -->
    </div>
  </template>
  
  <script>
  import axios from "axios";
  
  export default {
    data() {
      return {
        dataList: [],
        numList: [],
        numValue: "",
        pageNum: 1,
        pageSize: 50,
        totalCount: 0,
        timeVal: "",
        startTime: "",
        endTime: "",
        code: "", //错误信息
        total: 0,
        userName: "",
        isRead: null,
        noRead: null,
        duInfo: {},
        id: "",
        isSendEq0Count: 0, //失败数量
        isRedEq1Count: 0, //已读数量
        isSend: null
      };
    },
    created() {
      // this.isRead = this.$route.query.isRead;
      // this.noRead =
      //   Number(this.$route.query.allRead) - Number(this.$route.query.isRead);
      this.fetchTableList();
      this.fetchDetailsData();
      // console.log(this.duInfo,"222222222222");
    },
    activated() {
      // this.getchangeTitleCon();
    },
    methods: {
      // 获取表格数据
      fetchTableListIsSend(index) {
        this.isRead = null;
        this.pageNum = 1;
        this.isSend = index;
        this.getTableData();
      },
      getSendObject(item) {
        let str = "";
        if (item.sendGroup == 1) {
          str = item.groupName;
        } else {
          if (null != item.labelName) {
            str = item.labelName;
          } else {
            str = "个人";
          }
        }
        return str;
      },
      handleRefresh() {
        this.numValue = "";
        this.fetchTableList();
        this.fetchDetailsData();
      },
      //头部详情数据
      fetchDetailsData() {
        this.$http({
          url: this.$http.adornUrl(`cpcpdu/info/${this.$route.query.id}`),
          method: "get",
          params: this.$http.adornParams({})
        }).then(res => {
          if (res.data.code === 0) {
            this.duInfo = res.data.cpcpDu;
            console.log("this.duInfo====",this.duInfo);
            // console.log(this.duInfo);
            // console.log(this.duInfo.id, "duInfo.id");
            // this.id=res.data.cpcpDu.id;
            // console.log(this.id,"idididididid");
            this.getchangeTitleCon();
          }
        });
      },
      //点击选取当前批次
      getchangeTitleCon() {
        console.log(this.duInfo.id, "this.duInfo.id");
        // this.fetchDetailsData();
        // console.log("fff");
        this.$http({
          url: this.$http.adornUrl(`/cpcplog/logIndexs/${this.duInfo.id}`),
          method: "get",
          params: this.$http.adornParams({})
        }).then(res => {
          console.log(res, "getchangeTitleCon");
          this.numList = res.data.data;
          // for(let index =0;index<res.data.data.length;index++){
          //   this.numValue=res.data.data[index].logIndex
          // }
  
          // if (res.data.code === 0) {
          //   this.duInfo = res.data.cpcpDu;
          //   console.log(this.duInfo);
          // }
        });
      },
      changeTitleCon(logIndex) {
        this.numValue = logIndex;
        console.log(this.numValue, "this.numValue");
        this.fetchTableList();
      },
  
      getCallReadState(item) {
        let str = "";
        if (item.aiRed == 1) {
          str += "已响应";
          str += "</br>" + item.aiTime + "";
        }
        return str;
      },
      getIWorkReadState(item) {
        let str = "";
        if (item.iworkRed == 1) {
          str += "已响应";
          str += "</br>" + item.iworkTime + "";
        }
        return str;
      },
      //外呼情况
      getCallState(item) {
        let str = "";
        if (item.aiIsSend == "0") {
          str = "呼通失败";
        }
        if (item.aiIsSend == "2") {
          str = "未呼通";
        }
        if (item.aiIsSend == "1" && item.aiRed == 0) {
          str = "未接听";
        }
        if (item.aiRed == 1) {
          str = "已呼通";
        }
        if (item.aiRed == 2) {
          str = "呼叫失败";
        }
  
        if (item.aiTime != null) {
          str += "</br>" + item.aiTime + "";
        }
  
        return str;
      },
      //推送层级
      getState(item) {
        console.log("item===",item);
        let str = "";
        if (item == 2) {
          str = "二级单元";
        } else if(item == 3){
          str = "三级单元";
        }else if(item == 4){
          str = "四级单元";
        }else if(item == 5){
          str = "五级单元";
        }else{
          str = "";
        }
        return str;
      },
      //信息推送情况
      getSmsState(item) {
        let str = "";
        if (item.shortIsSend == 1) {
          str += "已推送";
          str += "</br>" + item.shortTime + "";
        } else if (item.shortIsSend == 2) {
          str += "未推送";
          // str += "</br>" + item.shortTime + "";
        } else if (item.shortIsSend == 0) {
          str += "推送失败";
          if (item.shortTime != null) {
            str += "</br>" + item.shortTime + "";
          }
        } else {
          str += "";
        }
  
        return str;
      },
      //推送情况
      getIWorkState(item) {
        let str = "";
        if (item.iworkIsSend == 1) {
          str += "已推送";
          str += "</br>" + item.iworkSendTime + "";
        } else if (item.iworkIsSend == 2) {
          str += "未推送";
        } else if (item.iworkIsSend == 0) {
          str += "推送失败";
          if (item.iworkSendTime != null) {
            str += "</br>" + item.iworkSendTime + "";
          }
        } else {
          str += "";
        }
  
        return str;
      },
      //推送日志
      // getIWorkmessage(item) {
      //   let str = "";
      //   if (item.message == 1) {
      //     str += "已推送";
      //     str += "</br>" + item.iworkSendTime + "";
      //   } else {
      //     str += "未推送";
      //   }
  
      //   return str;
      // },
  
      //  点击按钮去详情
      handleDetail(jobNo, logIndex) {
        console.log(jobNo, "jobNo", logIndex, "logIndex");
        this.$router.push({
          path: "/thirdDetDetails",
          query: {
            jobNo: jobNo,
            logIndex: logIndex
          }
        });
      },
      //点击Iwork用户名称去详情
      goDetail(jobNo, linkId) {
        console.log("ddddddd");
        console.log(jobNo, "jobNo", linkId, "linkId");
        this.$router.push({
          path: "/thirdDetDetails",
          query: {
            jobNo: jobNo,
            linkId: linkId
          }
        });
      },
      // 点击搜索
      // searchData() {
      //   this.fetchTableList();
      //   this.fetchDetailsData()
      // },
      waihu(id) {
        this.$http({
          url: this.$http.adornUrl("/cpcplog/testCall"),
          method: "post",
          params: this.$http.adornParams({
            id: id
          })
        }).then(res => {
          if (res.data.code === 0) {
            this.$message({
              message: "调用成功!",
              type: "success"
            });
            this.fetchTableList();
          }
        });
      },
      getTableData() {
        this.$http({
          url: this.$http.adornUrl(`/cpcplog/listInfo`),
          method: "get",
          params: this.$http.adornParams({
            page: this.pageNum,
            limit: this.pageSize,
            linkId: this.$route.query.id,
            searchStr: this.userName,
            isRead: this.isRead,
            isSend: this.isSend,
            startTime: this.startTime,
            endTime: this.endTime,
            sendType: 0,
            logIndex: this.numValue
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.total = data.page.totalCount;
            this.dataList = data.page.list;
            this.totalCount = data.totalCount;
            this.isSendEq0Count = data.isSendEq0Count;
            this.isRedEq1Count = data.isRedEq1Count;
          }
        });
      },
      // 获取表格数据
      fetchTableList() {
        this.getTableData();
      },
      // 点击已读未读
      fetchTableListWithFirstPage(isRead) {
        this.isRead = isRead;
        this.isSend = null;
        this.pageNum = 1;
        this.getTableData();
      },
      //格式化时间
      transformTimestamp(result) {
        const date = new Date(result);
        const Y = date.getFullYear() + "";
        const M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "";
        const D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
        // const h = date.getHours() + ":";
        // const m = date.getMinutes();
        // const s = date.getSeconds(); // 秒
        const dateString = Y + "-" + M + "-" + D;
        console.log("dateString", dateString); // > dateString 20200110
        return dateString;
      },
      //查询按钮
      searchData() {
        this.isSend = null;
        this.isRead = null;
        console.log(this.isRead, this.isSend);
        if (!this.timeVal == "") {
          var time1 = new Date(this.timeVal[0]).getTime();
          var time2 = new Date(this.timeVal[1]).getTime();
          const start = this.transformTimestamp(time1);
          const end = this.transformTimestamp(time2);
          this.startTime = start;
          this.endTime = end;
          console.log(this.startTime);
          console.log(this.endTime);
          this.fetchTableList();
        } else {
          this.startTime = "";
          this.endTime = "";
          this.fetchTableList();
        }
      },
      //数据导出
      exportGet() {
        // return
        this.$http({
          url: this.$http.adornUrl("cpcplog/downloadLog"),
          method: "get",
          params: this.$http.adornParams({
            linkId: this.$route.query.id,
            searchStr: this.userName,
            isRead: this.isRead,
            // readTime: this.timeVal,
            startTime: this.startTime,
            endTime: this.endTime,
            sendType: 0,
            logIndex: this.numValue
          }),
          responseType: "blob"
        }).then(res => {
          console.log(res, "ddddddd");
          if (res.status == 200) {
            if (this.totalCount === 0) {
              this.$message({
                message: "要导出的列表为空!",
                type: "warning"
              });
              return;
            } else {
              let blob = res.data;
              const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
              console.log(fileReader, "fileReader");
              fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
              fileReader.onload = event => {
                // 处理load事件。该事件在读取操作完成时触发
                // 新建个下载的a标签，完成后移除。
                let a = document.createElement("a");
                // console.log(this.duInfo.title,"duInfo.title");
                let _fileName = this.duInfo.activityName + ".xls";
                a.download = _fileName;
                a.href = event.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
              };
            }
          }
        });
      },
      // 分页
      pageChange(page) {
        console.log(page);
        this.pageSize = page._pageSize;
        this.pageNum = page._currentPage;
        this.fetchTableList();
      }
    }
  };
  </script>
  <style scoped>
  .green {
    color: green;
  }
  .red {
    color: red;
  }
  .des_con span {
    font-size: 18px;
    font-weight: 600;
  }
  .read {
    cursor: pointer;
    color: yellowgreen;
  }
  .table {
    width: 100%;
  }
  .table tr {
    line-height: 30px;
  }
  .table tr td {
    width: 50%;
  }
  .box-card /deep/ .el-range-editor--medium .el-range-input{
    background: transparent;
  }
  </style>
  